<template>
  <div>
    <el-table :data="dataList" stripe height="400" highlight-current-row border>
      <el-table-column prop="name" label="教师姓名"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleAdd(scope.row.id)"
            >添加</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 添加学生 -->
    <el-dialog :visible.sync="dialogVisibleAdd" title="学生列表">
      <el-table
        :data="dataStuList"
        ref="multipleTable"
        style="width: 100%; margin-left: 10px"
        @selection-change="handleSelectionChange"
      >
            <el-table-column
          type="selection"
          width="35"
          v-model="multipleSelection"
        ></el-table-column>
            <el-table-column
          label="姓名"
          prop="name"
          sortable
        ></el-table-column>
      </el-table>
      <el-button @click="submit()">保存</el-button>
    </el-dialog>
  </div>
</template>

<script>
import adminApi from "@/api/admin";
export default {
  data() {
    return {
      dataList: [],
      multipleSelection: [],
      addJson: {
        teaId: "",
        stuIds: [],
      },
      dialogVisibleAdd: false,
      dataStuList: [],
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    //查询
    fetchData() {
      adminApi.searchTea(1, 100).then((response) => {
        const resp = response.data;
        if (resp.code == 200) {
          this.dataList = resp.data;
          this.$message({
            message: resp.data,
            type: "success",
          });
        } else {
          this.$message({
            message: resp.data,
            type: "warning",
          });
        }
      });
    },
    getDataStuList(teaId) {
      //let teaId = localStorage.getItem("teaId")
      adminApi.searchStuNo(teaId).then((response) => {
        const resp = response.data;
        if (resp.code == 200) {
          this.dataStuList = resp.data;
          this.$message({
            message: resp.data,
            type: "success",
          });
        } else {
          this.$message({
            message: resp.msg,
            type: "warning",
          });
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //全选
    speedupData() {
      var arr = this.multipleSelection;
      let multis = [];
      for (var i = 0; i < arr.length; i++) {
        multis.push(arr[i].id);
      }
    },
    //以上为将数组中key值为id的数据遍历出来，然后，将所得到的数据传入mutis数组中，最后将multis数据提交至后端
    //全选选择框
    speedupCheckbox() {
      if (this.multipleSelection.length === 0) {
        this.$message({
          message: "请至少勾选一项，再进行操作",
          type: "warning",
        });
      } else {
        this.speedupData();
      }
    },
    handleAdd(id) {
      this.dialogVisibleAdd = true;
      this.addJson.teaId = id;
      this.getDataStuList(id);
    },
    submit() {
      for (let i = 0; i < this.multipleSelection.length; i++) {
        this.addJson.stuIds.push(this.multipleSelection[i].id)
      }
      // this.addJson.stuIds = this.multipleSelection;
      adminApi.addStuAssTea(this.addJson).then((response) => {
        const resp = response.data;
        if (resp.code == 200) {
          this.$message({
            message: resp.data,
            type: "success",
          });
        } else {
          this.$message({
            message: resp.data,
            type: "warning",
          });
        }
      });
    },
  },
};
</script>

<style scoped>
.imgSize {
  width: 200px;
  height: 200px;
}
</style>